<template>
  <el-form
    ref="smsLoginForm"
    status-icon
    label-width="120px"
    class="demo-loginFormData"
    :rules="smsRules"
    :model="smsFormData"
  >
    <el-form-item label="手机号" prop="phone" class="captrue-form-item">
      <el-input v-model="smsFormData.phone" maxlength="11" />
      <span class="Captcha-svg" @click="sendSms">{{ desc }}</span>
    </el-form-item>

    <el-form-item label="验证码" prop="code" class="username-form-item">
      <el-input v-model="smsFormData.code" maxlength="5" autocomplete="off" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(smsLoginForm)" class="btn">
        登入
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import * as api from "@/api/users.js";
import { reactive, ref, onUnmounted } from "vue";
import { smsRules, useSubmitForm } from "../../composition/login/validate";
//引入路由对象
import { useRouter } from "vue-router";
//引入store
import { useUser } from "@/store/users";
//引入消息提示
import { ElMessage } from "element-plus";
//引入loading加载框
// import { ElLoading } from "element-plus";

let router = useRouter();

let userStore = useUser();

let validateSuccess = async () => {
  console.log("校验成功");
  //发起登入请求的时候就要加载loading加载动画框
  let loadingInstance = ElLoading.service({
    // lock: true,
    text: "正在登入...",
    background: "rgba(0,0,0,.3)",
  });
  //发起短信登录请求
  try {
    let res = await api.smsApi(smsFormData.code);
    //关闭loading动画
    loadingInstance.close();
    // console.log(res);
    //存储token
    sessionStorage.setItem("ly-token", res.data.token);
    //存储用户信息
    userStore.$patch({
      userInfo: res.data.userInfo,
    });
    //页面跳转
    router.push("/");
  } catch (e) {
    console.log(e);
    //登录失败同样关闭loading动画
    loadingInstance.close();
  }
};

let validateFailed = () => {
  console.log("校验失败");
};
let submitForm = useSubmitForm(validateSuccess, validateFailed);

const smsLoginForm = ref();

const smsFormData = reactive({
  phone: "",
  code: "",
});

//短信登入

//声明响应式变量
let desc = ref("点击发送");

//处理用户频繁点击
let timeDownInterval = null;
let isClick = false;
let sendSms = async () => {
  if (!isClick) {
    //发起请求
    try {
      let res = await api.getSmsCode(smsFormData.phone);
      //消息提示
      ElMessage({
        message: "短信验证码发送成功",
        type: "success",
      });

      console.log(res);
      timeDown(60, desc, "秒后发送", desc.value, () => {
        //点击状态恢复到未点击
        isClick = false;
      });
    } catch (e) {
      //   console.log(e);
      //将按钮开关重制
      isClick = false;
      ElMessage({
        message: e,
        type: "error",
      });
      return;
    }
  }
  isClick = true;
};
//短信倒计时方法
/**
 *
 * @param {Number} timer 倒计时的时间
 * @param {Object} param 需要变更的响应式变量
 * @param {String} msg 倒计时的秒数
 * @param {String} enMsg 倒计时结束之后，回显的文字
 * @param {Function} cb 倒计时结束之后回调的函数
 */

let timeDown = (timer = 5, param, msg, enMsg, cb) => {
  let count = timer;
  param.value = (count + "").padStart(2, 0) + msg;
  let interval = setInterval(() => {
    count--;
    if (count < 1) {
      clearInterval(interval);
      //倒计时结束
      param.value = enMsg;
      cb && cb();
      return;
    }
    param.value = (count + "").padStart(2, 0) + msg;
  }, 1000);
  //返回计时器
  return interval;
};

//组件卸载掉钩子
onUnmounted(() => {
  //卸载定时器
  console.log("组件被卸载了");
  if (timeDownInterval) clearInterval(timeDownInterval);
});
</script>
<style lang="scss" scoped>
.username-form-item,
.password-form-item {
  .el-input {
    width: 200px !important;
    margin-right: 50px;
  }
}
.captrue-form-item {
  .el-input {
    width: 130px !important;
    margin-right: 120px;
  }
}
.btn {
  background: linear-gradient(90deg, #1596fb, #002dff);
  border-radius: 6px;
  width: 200px;
  margin-right: 50px;
}
.Captcha-svg {
  position: fixed;
  background-color: white;
  width: 70px;
  height: 32px;
  border: 1 solid #606266;
  border-radius: 0 4px 4px 0;
  margin-left: 130px;
  font-size: 12px;
  text-decoration: underline black;
  text-align: center;
  cursor: pointer;
}
.captrue-form-item {
  :deep(.el-input__wrapper) {
    border-radius: 4px 0 0 4px;
    border-right: 0;
    box-shadow: 0 0 0 0;
  }
}
</style>
